<?xml version="1.0"?>
<html>
	<head>
		<link rel="stylesheet" type="text/css" tal:attributes="href string:${cssRootFolderUrl}stock.css" />
		<link rel="stylesheet" type="text/css" tal:attributes="href string:${cssRootFolderUrl}global.css" />
		<style>
			.disabled {
			opacity : 0.4;
			filter: alpha(opacity=40); /* msie */;
			}
		</style>
	</head>
	<table>
		<tr class="gradient-bg">

			<th>
				<table>
					<tr class="noBorder">
						<td class="noBorder">id</td>
						<td class="noBorder">
							<img class="sortTrigger" tal:attributes="src string:${imgRootFolderUrl}sort_asc_red.png" />
							<br />
							<img class="sortTrigger" id="selectedSortElement" tal:attributes="src string:${imgRootFolderUrl}sort_desc_green.png" />
						</td>
					</tr>
				</table>
			</th>
			<th>
				<table>
					<tr class="noBorder">
						<td class="noBorder">Meeteenheid</td>
						<td class="noBorder">
							<img class="sortTrigger" tal:attributes="src string:${imgRootFolderUrl}sort_asc_red.png" />
							<br />
							<img class="sortTrigger" tal:attributes="src string:${imgRootFolderUrl}sort_desc_red.png" />
						</td>
					</tr>
				</table>
			</th>
			<th>
				<table>
					<tr class="noBorder">
						<td class="noBorder">Hoeveelheid</td>
						<td class="noBorder">
							<img class="sortTrigger" tal:attributes="src string:${imgRootFolderUrl}sort_asc_red.png" />
							<br />
							<img class="sortTrigger" tal:attributes="src string:${imgRootFolderUrl}sort_desc_red.png" />
						</td>
					</tr>
				</table>
			</th>
			<th>
				<table>
					<tr class="noBorder">
						<td class="noBorder">Aantal voorradig</td>
						<td class="noBorder">
							<img class="sortTrigger" tal:attributes="src string:${imgRootFolderUrl}sort_asc_red.png" />
							<br />
							<img class="sortTrigger" tal:attributes="src string:${imgRootFolderUrl}sort_desc_red.png" />
						</td>
					</tr>
				</table>
			</th>
			<th>
				<table>
					<tr class="noBorder">
						<td class="noBorder">Aantal voorradig</td>
						<td class="noBorder">
							<img class="sortTrigger" tal:attributes="src string:${imgRootFolderUrl}sort_asc_red.png" />
							<br />
							<img class="sortTrigger" tal:attributes="src string:${imgRootFolderUrl}sort_desc_red.png" />
						</td>
					</tr>
				</table>
			</th>
			<th>
				<table>
					<tr class="noBorder">
						<td class="noBorder">Aantal gewenst</td>
						<td class="noBorder">
							<img class="sortTrigger" tal:attributes="src string:${imgRootFolderUrl}sort_asc_red.png" />
							<br />
							<img class="sortTrigger" tal:attributes="src string:${imgRootFolderUrl}sort_desc_red.png" />
						</td>
					</tr>
				</table>
			</th>
			<th>
				<table>
					<tr class="noBorder">
						<td class="noBorder">Boodschappenlijst</td>
						<td class="noBorder">
							<img class="sortTrigger" tal:attributes="src string:${imgRootFolderUrl}sort_asc_red.png" />
							<br />
							<img class="sortTrigger" tal:attributes="src string:${imgRootFolderUrl}sort_desc_red.png" />
						</td>
					</tr>
				</table>
			</th>
			<th>
				<table>
					<tr class="noBorder">
						<td class="noBorder">Acties</td>
					</tr>
				</table>
			</th>
		</tr>
		
		
		<tr tal:repeat="item stock">
			<td tal:content="item/${tableName}/${productName}">The name of the stock item</td>
			<td tal:content="item/${tableName}/${packageName}">TODO</td>
			<td tal:content="item/${tableName}/${metricSystemUnitName}"></td>
			<td tal:content="item/${tableName}/${quantity}"></td>
			<td tal:content="item/${tableName}/${amountAvailable}"></td>
			<td tal:content="item/${tableName}/${amountDesired}"></td>
			<!--if-->
			<td tal:condition="item/${tableName}/${onShopList}">
				<img class="sortTrigger" tal:attributes="src string:${imgRootFolderUrl}basket_put.png" />
			</td>
			<!--else-->
			<td tal:condition="not: item/${tableName}/${onShopList}">&nbsp;</td>
			<td>
				<table>
					<tr>
						<td class="noBorder"><img class="sortTrigger" tal:attributes="src string:${imgRootFolderUrl}basket_edit.png"/></td>
						<td class="noBorder"><img class="sortTrigger" id="deleteImage" tal:attributes="src string:${imgRootFolderUrl}basket_delete.png" /></td>
					</tr>
				</table>
			</td>
		</tr>
		
	</table>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
	<script type="text/javascript">
		var selectedSortElement = $("img#selectedSortElement");
		
		$(function() {
			$("img.sortTrigger").click(function() {
				replaceAttributeText($(selectedSortElement),"green", "red", "src");
				replaceAttributeText($(this),"red", "green", "src");
				selectedSortElement = $(this);
			});
		});
		
		function replaceAttributeText(object, oldValue, newValue, attributeName){
			var value = $(object).attr(attributeName);
			value = value.replace(oldValue, newValue);
			$(object).attr(attributeName, value);
		};
		
		$("#deleteImage").click(function(){
			<?php
				echo "ok";
				echo $manager->delete("ok");
			?>
		});
	</script>
</html>